<template>
    <div>
       门店名称： <input type="text" style="width: 80px;" v-model="name">
       门店状态 <select v-model="zt">
            <option value="0">请选择</option>
            <option :value="1">启用</option>
            <option :value="2">禁用</option>
        </select>

        <input type="button" value="查询" @click="dbxs">

        <input type="button" value="批量删除" @click="plsc">
<table class="table table-bordered" border="1">
   <thead>
    <tr style="background-color: aqua;">
        <td><input type="checkbox" v-model="udu" @change="lie"></td>
        <td>门店名称</td>
        <td>分店名称</td>
        <td>门店地址</td>
        <td>门店电话</td>
        <td>门店状态</td>
        <td>门店介绍</td>
        <td>入住须知</td>
        <td>交通信息</td>
        <td>交通信息</td>
    </tr>
   </thead>
   <tbody>
    <tr v-for="item in xs">
        <td><input type="checkbox" :checked="kuk"   v-model="arrids" :value="item.shop_id" @change="fanx"></td>
        <td>{{item.shop_name}}</td>
        <td>{{item.shop_Branchname}}</td>
        <td>{{item.shop_Address}}</td>
        <td>{{item.shop_pone.substring(0,3)+"****"+item.shop_pone.substring(7,11)}}</td>
        <td>{{item.shop_zt==false?"启用":"禁用"}}</td>
        <td>{{item.shop_js}}</td>
        <td>{{item.shop_Nptic}}</td>
        <td>{{item.jtxx}}</td>
        <td>{{item.shop_Img}}</td>
    </tr>
   </tbody>
</table>

当期第{{fy.pageindex}} 共{{fy.ys}}页 共{{fy.count}}行

<a href="#" style="margin-right: 10px;" @click="jaio('a')">首页</a>
<a href="#" style="margin-right: 10px;" @click="jaio('b')">上一页</a>
<a href="#" style="margin-right: 10px;" @click="jaio('c')">下一页</a>
<a href="#" style="margin-right: 10px;" @click="jaio('d')">首页</a>

<select v-model="du" @change="ljo">
    <option :value="1">每页1条</option>
    <option :value="2">每页2条</option>
    <option :value="3">每页3条</option>
</select>

<input type="text" style="width: 30px;" v-model="xixi">
<input type="button"  value="跳转" @click="nlasjd">

    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import axios from "axios";
import type { RefSymbol } from "@vue/reactivity";
const xixi=ref("");
const du=ref(3);
const name=ref("")
const zt=ref(0)

const udu=ref(false)
const kuk=ref(false)
const arrids=ref([])


const plsc=()=>{

if(arrids.value.length==0)
{

alert('至少选择一条数据');
return;

}
axios.delete('https://localhost:7268/api/md/mendianshow',{

    params:{

        a:arrids.value.toString()
    }

})
.then(res=>{

if(res.data>0)
{

    alert('删除成功')
}
else{

    alert('删除失败')
}

})
.catch(error=>{

    console.log(error)
})
}

const lie=()=>{
if(udu.value)
{

    kuk.value=true;
    arrids.value=xs.value.map((item:any)=>{

        return item.shop_id
    })

}
else{
    kuk.value=false;
    arrids.value=[];
}

}


const fanx=()=>{

if(arrids.value.length==xs.value.length)
{

    udu.value=true
}
else{

    udu.value=false
}

}


const xs:any=ref([{




    shop_id: 0,
  shop_name: "",
  shop_Branchname: "",
  shop_Address: "",
  shop_pone: "",
  shop_zt: true,
  shop_js: "",
  shop_Nptic: "",
  jtxx: "",
  shop_Img: ""


}])


const fy = ref({

    pageindex:1,
    pagesize:2,
   count:0,
   ys:0


})






onMounted(()=>{
    ljo();
    dbxs();
})

const dbxs=()=>{
axios.get('https://localhost:7268/api/md/mdshow',
    {

params:{
    shop_name:name.value,
    shop_zt:zt.value,
    pageindex:fy.value.pageindex,
    pagesize:fy.value.pagesize
}

    }
)
.then(res=>{

    console.log(res.data)
    xs.value=res.data.pagedate
    fy.value.count=res.data.totalcount
    fy.value.ys=res.data.pagecount
    
})
.then(error=>{


   console.log(error) 
})




}



const jaio=(fyid:string)=>{

switch (fyid) {
    case "a":
    fy.value.pageindex=1
    dbxs();

        break;

   
        case "b":
  if(fy.value.pageindex>1)
  {

    fy.value.pageindex--
    dbxs();
  }
  else{

    alert('当前已经是第一页')
  }

        break;




        case "c":
  if(fy.value.pageindex<fy.value.ys)
  {

    fy.value.pageindex++
    dbxs();
  }
  else{

    alert('当前已经是最后一页');
  }

        break;



        case "d":
    fy.value.pageindex=fy.value.ys
    dbxs();

        break;

}




}


const ljo=()=>{

    fy.value.pagesize=du.value
    dbxs();
}


const nlasjd=()=>{

    var dujie= xixi.value
    if(dujie=="")
{

    alert('请输入跳转页码');
    return;


}

if(isNaN(Number(xixi.value)))
{

    alert('输入内容只能是数字');
    return;


}
if(Number(xixi.value)<=1)
{

    alert('不能小于第一页');
    return;


}

if(Number(xixi.value)>fy.value.ys)
{

    alert('不能大于最后一页');
    return;


}


fy.value.pageindex= Number(xixi.value);
dbxs();
}
</script>

<style scoped>

</style>